import React from 'react'
import {Card} from 'antd'
import echartTheme from './../themeLight'
import echarts from 'echarts/lib/echarts'
//导入饼形图
import 'echarts/lib/chart/pie'
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/title'
import 'echarts/lib/component/legend'
import 'echarts/lib/component/markPoint'
import ReactCharts from 'echarts-for-react'
export default class Bar extends React.Component{
    componentWillMount(){
        echarts.registerTheme('tomarow',echartTheme)
    }
    getOption =()=>{
        let option={
            title : {
                text: '用户骑行订单',
                subtext: '纯属虚构',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            series : [
                {
                    name: '订单数量',
                    type: 'pie',
                    data:[
                        {value:335, name:'周一'},
                        {value:310, name:'周二'},
                        {value:234, name:'周三'},
                        {value:135, name:'周四'},
                        {value:1548, name:'周五'},
                        {value:2548, name:'周六'},
                        {value:3548, name:'周日'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        }
        return option;
    }
    getOption2 =()=>{

        let option={
            title:{
                text: '用户骑行订单',
                x:'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['周一','周二','周三','周四','周五','周六','周日']
            },
            series: [
                {
                    name:'订单数量',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'周一'},
                        {value:310, name:'周二'},
                        {value:234, name:'周三'},
                        {value:135, name:'周四'},
                        {value:1548, name:'周五'},
                        {value:2548, name:'周六'},
                        {value:3548, name:'周日'}
                    ]
                }
            ]
        }
        return option;
    }
    getOption3 =()=>{
      let option={
          title: {
              text: '用户订单',
              left: 'center',
              top: 20,
          },
          legend: {
              orient: 'vertical',
              x: 'left',
              data:['周一','周二','周三','周四','周五','周六','周日']
          },
          tooltip : {
              trigger: 'item',
              formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series : [
              {
                  name:'订单数量',
                  type:'pie',
                  radius : '55%',
                  center: ['50%', '50%'],
                  data:[
                      {value:1335, name:'周一'},
                      {value:2310, name:'周二'},
                      {value:1234, name:'周三'},
                      {value:1135, name:'周四'},
                      {value:1548, name:'周五'},
                      {value:2548, name:'周六'},
                      {value:3548, name:'周日'}
                  ].sort(function (a, b) { return a.value - b.value; }),
                  roseType: 'radius',
                  animationType: 'scale',
                  animationEasing: 'elasticOut',
                  animationDelay: function (idx) {
                      return Math.random() * 200;
                  }
              }
          ]
      }
      return option;
    }
    render(){
        return(
            <div>
                <Card title="饼形图表之一">
                    <ReactCharts option={this.getOption()} theme="tomarow" style={{height:500}}/>
                </Card>
                <Card title="饼形图表之二" style={{marginTop:"10px"}}>
                    <ReactCharts option={this.getOption2()} theme="tomarow" style={{height:500}}/>
                </Card>
                <Card title="饼形图表之三" style={{marginTop:"10px"}}>
                    <ReactCharts option={this.getOption3()} theme="tomarow" style={{height:500}}/>
                </Card>
            </div>
        )
    }
}